<template>
  <el-table
    :data="wmsInventoryList"
    :span-method="objectSpanMethod"
    border
    :header-cell-style="tableRowClassName"
  >
    <el-table-column width="100" align="center" prop="channel" label="渠道">
    </el-table-column>
    <el-table-column
      width="120"
      align="center"
      prop="shopName"
      label="店铺"
    ></el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="yesterdaySales"
      label="昨日销售额"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="yesterdaySalesYoy"
      label="昨日销售额同比"
      width="120"
    >
      <template slot-scope="scope">
        {{ scope.row.yesterdaySalesYoy }}%
      </template>
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="weeklySales"
      label="本周销售额"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="weeklySalesCost"
      label="本周成本"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="weeklySalesYoy"
      label="本周销售额同比"
      width="120"
    >
      <template slot-scope="scope"> {{ scope.row.weeklySalesYoy }}% </template>
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="weeklyMarketingCost"
      label="本周营销花费"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="weeklyNRoi"
      label="本周NROI"
      width="120"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="monthlySales"
      label="本月销售额"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="monthlySalesTarget"
      label="月销售目标"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="monthlySalesCost"
      label="本月商品成本"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="monthlySalesYoy"
      label="本月销售额同比"
      width="120"
    >
      <template slot-scope="scope"> {{ scope.row.monthlySalesYoy }}% </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="monthlySalesChain"
      label="本月销售额环比"
      width="120"
    >
      <template slot-scope="scope">
        {{ scope.row.monthlySalesChain }}%
      </template>
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="monthlyMarketingCost"
      label="本月营销花费"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="monthlyNRoi"
      label="本月NROI"
      width="120"
    >
    </el-table-column>

    <el-table-column
      width="100"
      align="center"
      prop="quarterlySales"
      label="季度销售额"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="salesTargetQuarterly"
      label="季度销售目标"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="quarterlySalesCost"
      label="季度商品成本"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="quarterlySalesYoy"
      label="季度销售额同比"
      width="120"
    >
      <template slot-scope="scope">
        {{ scope.row.quarterlySalesYoy }}%
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="quarterlySalesChain"
      label="季度销售额环比"
      width="120"
      ><template slot-scope="scope">
        {{ scope.row.quarterlySalesChain }}%
      </template>
    </el-table-column>

    <el-table-column
      width="100"
      align="center"
      prop="quarterlyMarketingCost"
      label="季度营销花费"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="quarterlyNRoi"
      label="季度NROI"
      width="120"
    >
    </el-table-column>

    <el-table-column
      width="100"
      align="center"
      prop="yearSales"
      label="年度销售额"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="salesTargetYear"
      label="年度销售目标"
    >
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="yearSalesCost"
      label="年度商品成本"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="yearSalesYoy"
      label="年度销售额同比"
      width="120"
    >
      <template slot-scope="scope"> {{ scope.row.yearSalesYoy }}% </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="yearSalesChain"
      label="年度销售额环比"
      width="120"
    >
      <template slot-scope="scope"> {{ scope.row.yearSalesChain }}% </template>
    </el-table-column>
    <el-table-column
      width="100"
      align="center"
      prop="yearMarketingCost"
      label="年度营销花费"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="yearNRoi"
      label="年度NROI"
      width="120"
    >
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    wmsInventoryList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      if (column.label.includes("周")) {
        return "background:#ed7d31 !important;color:#fff ";
      } else if (column.label.includes("月")) {
        return "color: #515a6e;background:#c4dbf0 !important;";
      } else if (column.label.includes("季")) {
        return "background:#ed7d31 !important;color:#fff ";
      } else if (column.label.includes("年")) {
        return "color: #515a6e;background:#c4dbf0 !important;";
      } else if (column.label.includes("日")) {
        return "color: #515a6e;background:#c4dbf0 !important;";
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // const { timetableBookVO } = this.detailData;
      const timetableBookVO = this.wmsInventoryList;
      const listMap = {};
      timetableBookVO.length &&
        timetableBookVO.forEach((item, index) => {
          if (listMap[item.channel]) {
            // len - 用于书架合并多少行
            listMap[item.channel].len += 1;
            // firstIndex - 用于同一个书架，最开始的书架进行合并，例如书架1，有3本书，则第一本书的书架1合并3行，后面都为0即可
            listMap[item.channel].firstIndex =
              listMap[item.channel].firstIndex < index
                ? listMap[item.channel].firstIndex
                : index;
          } else {
            listMap[item.channel] = { len: 1, firstIndex: index };
          }
        });
      if (columnIndex == 0) {
        if (
          listMap[row.channel] &&
          listMap[row.channel].firstIndex == rowIndex
        ) {
          return { rowspan: listMap[row.channel].len, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
  },
};
</script>